<template>
	<view class="g-brand" v-if="info.name">
		<view class="brand-banner">
			<image class="brand-logo" :src="$imgUrl + info.img" mode="scaleToFill"></image>
			<view class="ctn">
				<view class="name">{{ info.name }}</view>
				<view class="sals">在售商品 {{ info.sales || 0 }} 件</view>
			</view>
			<view class="btn-brand" @click="$go(`/pages/list/list?brand=${info.id}&name=${info.name}`)">进入品牌</view>
		</view>
		<view class="special-goods" v-if="info.goods && info.goods.length>0">
			<view class="special-goods-item" v-for="(item,index) in info.goods" :key="index">
                <g-goods :goods="item"></g-goods>
			</view>
		</view>
		<view style="clear: both"></view>
	</view>
</template>

<script setup>
import gGoods from './g-goods.vue'
const props = defineProps({
	info: {
		type:Object,
		default: {}
	}
})


</script>

<style scoped lang="scss">
.g-brand {
    padding: 24rpx;
    margin-top: 20rpx;
    background: #fff;
	.brand-logo {
		width: 96rpx;
		height: 96rpx;
	}
	// 品牌brand
	.brand-banner {
		display: flex;
		align-items: center;
		color: #000;
		.ctn {
			flex-grow: 1;
			padding: 0rpx 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name {
				font-size: 28rpx;
			}
			.sals {
				font-size: 22rpx;
                color: #999;
			}
		}
		.btn-brand {
			width: 144rpx;
			line-height: 54rpx;
			background-color: $main_color;
			color: white;
			text-align: center;
			border: 1px solid #ffffff;
            font-size: 20rpx;
            border-radius: 54rpx;
		}
	}
	// 滚动商品
	.special-goods {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		margin-top: 24rpx;
		.special-goods-item {
			width: 250rpx;
			margin-left: 24rpx;
			display: inline-block;
			background: white;
			border-radius: 24rpx;
            &:first-child{
                margin-left: 0;
            }
		}
		&::-webkit-scrollbar {
			// 滚动条整体
			background: none;
			width: 0;
			height: 0;
		}
	}
}

</style>
